<template>
    <div class="abd">
        <AccountView :userInfo="userInfo"/>
        <div class="unloginBtn" @click="unloginBtnFun">退出登录</div>
    </div>
</template>

<script>
import {instance}  from '@/socketio';
import AccountView from '@/components/AccountView.vue';
export default {
    name: "AbView",
    components: {
        AccountView,
    },
    data(){
        return {
            userInfo: {
                avatar: '',
                account: '',
                nickname: '',
                uniqueId: '',
            },
        }
    },
    created(){
        console.log('ab_created');
        this.init();
    },
    methods: {
        init(){
            this.userInfo = this.$store.getters.userInfo || {};
        },
        // 退出登录
        unloginBtnFun(){
            this.$store.dispatch('removeToken');
            this.$store.dispatch('clearUserInfo');
            if(instance.socket){
                instance.socket.disconnect(true); // 断开socketio
            }
            instance.socket = null;
            this.$router.push('/login');
        }
    },
}
</script>
<style scoped>
.unloginBtn {
    text-align: center;
    border-radius: 5px;
    background: green;
    color: #ffffff;
    padding: 10px;
    width: 100px;
    margin: 15px auto;
}
</style>